<template>
    <div class="graph-fitler">
        <div class="fitler-collapse">
            <Collapse  v-if="conditions !=null && conditions.length>0">
                <Panel :name="index+'_index'" v-for="(item,index) in conditions" :key="index" >
                    {{item.columnName}}
                    <div class="f-r p-r-10">
                        <i title="编辑筛选" class="fa fa-gear p-r-5" @click="editCon(index)"></i>
                        <i title="移除筛选" class="fa fa-remove "  @click="removeCon(index)"></i>
                    </div>
                    <p slot="content" v-for="(it,sindex) in item.list" :key="sindex">
                        <span>{{it.type |typeName }}</span>
                        <span  v-if="it.type=='12'">
                            <span   >
                                {{it.start |timevalue}}
                            </span>
                            <span   >
                                {{it.end |timevalue}}
                            </span>
                        </span>
                        <span   v-else    >
                            {{it.value |timevalue}}
                        </span>
                    </p>
                </Panel>
            </Collapse>
        </div>
        <modal title="筛选编辑" v-model="modalShow" :auto-close="false" :mask-closable="false" width="800" class="filtermodal">
            <Form  class="graph-fitler-form"   :grid="1" :label-width="90" label-position="right">
                <Form-item label="筛选条件"  >
                </Form-item>
                <Form-item :label="filterInfo.columnName" v-if="showAdd" >
                    <Select v-model="addInfo.type" style="width:200px" class="f-l">
                        <Option v-for="it in changeOptions" :value="it.value" :key="it.value" :label="it.label"></Option>
                    </Select>
                    <div class="f-l  m-l-10" v-if="addInfo.type=='12'">
                        <div v-if="filterInfo.dataType=='date'" class="f-l">
                            <DatePicker  type="datetime" placeholder="请输入开始日期" style="width: 150px"
                                v-model="addInfo.start"></DatePicker>
                            <DatePicker   class="p-l-5" type="datetime" placeholder="请输入结束日期" style="width: 150px"
                                v-model="addInfo.end"></DatePicker>
                        </div>
                        <div v-else>
                            <Input placeholder="请输入最小值"   style="width:150px;" clearable class="normal-input f-l m-l-10" v-model="addInfo.start"></Input>
                            <Input placeholder="请输入最大值"   style="width:150px;" clearable class="normal-input f-l m-l-10" v-model="addInfo.end"></Input>
                        </div>
                    </div>
                    <div class="f-l m-l-10" v-else>
                        <DatePicker v-if="filterInfo.dataType=='date'"    :disabled="addInfo.type=='6' || addInfo.type=='7'"
                         type="datetime" placeholder="请输入日期" style="width: 150px" v-model="addInfo.value"></DatePicker>
                        <Input  v-else placeholder="请输入条件"
                         :disabled="addInfo.type=='6' || addInfo.type=='7'"   style="width:150px;" clearable class="normal-input " v-model="addInfo.value"></Input>
                    </div>
                    <div class="f-l pointer" title="添加该条件" @click="addFilter()" v-if="filterInfo.dataType=='string'"> <i class="fa fa-plus m-l-10"></i></div>
                </Form-item>
                <Form-item label="条件选择" v-if=" filterInfo.list!=null  && filterInfo.list.length>1"  >
                    <Select v-model="filterInfo.conType" style="width:200px" class="f-l">
                        <Option value="or"  label="满足任意条件"></Option>
                        <Option value="and"  label="满足全部条件"></Option>
                    </Select>
                </Form-item>

                <Form-item :label="filterInfo.columnName" v-if="filterInfo.list !=null" v-for="(item,index) in filterInfo.list" :key="index">
                    <div class="f-l" style="width:200px">
                        {{item.type |typeName }}
                    </div>
                    <div class="f-l" v-if="item.type=='12'">
                        <div class="f-l" style="width:150px;" >
                            {{item.start |timevalue}}
                        </div>
                        <div class="f-l" style="width:150px;" >
                            {{item.end |timevalue}}
                        </div>
                    </div>
                    <div class="f-l  " v-else  style="width:150px;" >
                        {{item.value |timevalue}}
                    </div>
                    <div class="f-l pointer" title="删除该条件" @click="removeFilter(index)"> <i class="fa fa-minus m-l-10"></i></div>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="saveFilter">保存</Button>
                <Button type="warning" @click="modalShow =false">取消</Button>
            </div>
        </modal>
    </div>
</template>
<script>
import util from 'util'
import {filtertype} from '@/assets/js/graph-chart'
export default {
    name: 'graph-fitler',
    props: {
        conditions:{
            type:Array,
            default:function () {
                return []
            }
        }
    },
    watch:{
        conditions:  {
            handler:function(newValue, oldValue) {
                console.log('过滤器 conditions',newValue,oldValue)

                if(newValue.length>oldValue.length && newValue[newValue.length-1].list.length==0){

                    this.editCon(newValue.length-1);
                }
    　　　　},
    　　　　deep: true
    　　},
    },
    computed:{
        showAdd(){
            if((this.filterInfo.dataType=='int' || this.filterInfo.dataType=='date') && this.filterInfo.list !=null 
                &&this.filterInfo.list.length>0){
                return false;
            }
            return true;

        },
        changeOptions(){
            if(this.filterInfo.dataType=='date'){
                return this.dataOptions;
            }else if(this.filterInfo.dataType=='int'){
                return this.numOptions;
            }else if(this.filterInfo.dataType=='string'){
                return this.charsOptions;
            }else{
                return [];
            }
        }
    },
    filters:{
        typeName:(value)=>{
            var data =filtertype;
            var arr =data.charsOptions.concat(data.numOptions);
            for(var i in arr){
                if(value==arr[i].value){
                    return arr[i].label;
                }
            }
            return '';
        },
        timevalue(value){
            if(value instanceof Date){
                return util.util.formatDates(value);
            }else{
                return value;
            }
        }
    },
    data () {
        return {
            init :true,
            modalShow:false,
            charsOptions:filtertype.charsOptions,
            numOptions:filtertype.numOptions,
            dataOptions:filtertype.dataOptions,
            filterInfo:{},
            editIndex:'',
            addInfo:{
                type:'',
                start:'',
                end:'',
                value:''
            }
        }
    },
    mounted(){
    },
    methods:{
        editCon(index){
            event.stopPropagation();
            this.filterInfo= util.util.cloneObj(this.conditions[index]);
            this.editIndex =index;
            this.addInfo.type = this.filterInfo.type;
            this.modalShow=true;
        },
        addFilter(callback){
            var param = util.util.cloneObj(this.addInfo)
            console.log(this.addInfo)
            if(this.addInfo.type==null || this.addInfo.type==''){
                this.$Message.error('请选择筛选类型')
                return ;
            }
            if(this.addInfo.type!='6' && this.addInfo.type!='7'){
                if(this.addInfo.type==12){
                    if(this.addInfo.start==null || this.addInfo.start=='' || this.addInfo.end ==null || this.addInfo.end==''){
                        this.$Message.error('请输入最大值和最小值')
                        return ;
                    }
                }else{
                    if(this.addInfo.value==null || this.addInfo.value==''){
                        this.$Message.error('请输入条件值')
                        return ;
                    }
                }
                if(this.filterInfo.dataType=='date'){
                    if(this.addInfo.type==12){
                        param.start= util.util.formatDate(new Date(this.addInfo.start),3,'-');
                        param.end=util.util.formatDate(new Date(this.addInfo.end),3,'-');
                        if(param.start>=param.end){
                            this.$Message.error('开始值不能大于结束值')
                            return ;
                        }
                    }else{
                        param.value =util.util.formatDate(new Date(this.addInfo.value),3,'-')
                        // param.value=new Date(this.addInfo.value);
                    }
                }
                if(this.filterInfo.dataType=='int'){
                    if(this.addInfo.type==12){
                        if(!util.reg.up.test(this.addInfo.start) && !util.reg.up.test(this.addInfo.start) ){
                            this.$Message.error('请输入数值类型')
                            return ;
                        }
                        param.start =parseFloat(this.addInfo.start);
                        param.end=parseFloat(this.addInfo.end);
                        if(param.start>=param.end){
                            this.$Message.error('开始值不能大于结束值')
                            return ;
                        }
                    }else{
                        if(!util.reg.up.test(this.addInfo.value)){
                            this.$Message.error('请输入数值类型')
                            return ;
                        }
                    }
                }
            }
            this.filterInfo.list.push(param);
            util.util.cleanObj(this.addInfo);
            if(callback!=null){
                callback();
            }
        },
        saveFilter(){
            var _this =this ;
            function save(){
                util.util.cleanObj(_this.addInfo);
                _this.$set(_this.conditions,_this.editIndex,util.util.cloneObj(_this.filterInfo))
                _this.modalShow=false;
            }
            if(this.filterInfo.dataType=='int' || this.filterInfo.dataType=='date'){
                this.addFilter(save);
            }else{
                save();
            }
        },
        removeFilter(index){
            this.filterInfo.list.splice(index,1);
        },
        removeCon(index){
            this.conditions.splice(index,1);
        }
    }
}
</script>
<style lang="less">
.filtermodal{
    .graph-fitler-form{
        min-height: 300px;
        .ivu-date-picker{
            display: block;
            float: left;
        }
    }
}
</style>
